<template>
    <view class="component-order-action">
        <!-- 购买 -->
        <block v-if="order.listType == 't1'">
            <block v-if="order.state == 0">
                <view class="btn pay" @click.stop="payOrder">
                    <text>立即支付</text>
                </view>
            </block>
            <block v-if="order.state == 0 || order.state == 1">
                <view class="btn" @click.stop="cancelOrder">
                    <text>取消订单</text>
                </view>
            </block>
        </block>
        <!-- 报/议价 -->
        <block v-if="order.listType == 't2'">
            <block v-if="order.state == 1">
                <view class="btn pay" @click.stop="payOrder">
                    <text>立即支付</text>
                </view>
            </block>
            <block v-if="order.state == 0 || order.state == 1">
                <view class="btn" @click.stop="cancelOrder">
                    <text>取消订单</text>
                </view>
            </block>
        </block>
        <!-- 购买、报/议价公共操作 -->
        <block v-if="order.listType == 't1' || order.listType == 't2'">
            <block v-if="order.state == 2 || order.state == 4 || order.state == 5">
                <view class="btn" @click.stop="refundOrder">
                    <text>申请退款</text>
                </view>
            </block>
            <block v-if="order.state == 4">
                <view class="btn" @click.stop="payRetainage">
                    <text>支付尾款</text>
                </view>
            </block>
            <block v-if="order.state == 5">
                <view class="btn" @click.stop="finishOrder">
                    <text>确认完成</text>
                </view>
            </block>
            <block v-if="order.state == 6 && order.needAppraise">
                <view class="btn" @click.stop="appraiseOrder">
                    <text>评价师傅</text>
                </view>
            </block>
            <block v-if="order.state == 6 && !order.needAppraise">
                <view class="btn normal">
                    <text>已评价</text>
                </view>
            </block>
            <block v-if="order.state == 7">
                <view class="btn normal">
                    <text>请等待审核</text>
                </view>
            </block>
            <block v-if="order.state == 8">
                <view class="btn normal">
                    <text>已退款</text>
                </view>
            </block>
            <block v-if="order.state == 9">
                <view class="btn" @click.stop="showReason">
                    <text>查看未通过原因</text>
                </view>
            </block>
            <block v-if="order.state == 6 || order.state == 8 || order.state == 9">
                <!-- <view class="del" @click.stop="deleteOrder">
                    <text class="iconfont icon-shanchu"></text>
                </view> -->
            </block>
        </block>
        <!-- 货运 -->
        <block v-if="order.listType == 't3'">
            <block v-if="order.state == 0">
                <view class="btn pay" @click.stop="payOrder">
                    <text>立即支付</text>
                </view>
            </block>
            <block v-if="order.state == 0 || order.state == 1">
                <view class="btn" @click.stop="cancelOrder">
                    <text>取消订单</text>
                </view>
            </block>
            <block v-if="order.state == 2">
                <view class="btn" @click.stop="finishOrder">
                    <text>确认完成</text>
                </view>
            </block>
            <block v-if="order.state == 3">
                <view class="btn normal">
                    <text>已完成</text>
                </view>
                <!-- <view class="del" @click.stop="deleteOrder">
                    <text class="iconfont icon-shanchu"></text>
                </view> -->
            </block>
        </block>
    </view>
</template>

<script>
export default {
    name: "component-order-action",
    data() {
        return {};
    },
    props: {
        order: {
            type: Object,
            default: () => {},
        },
    },
    components: {},
    created() {},
    mounted() {},
    destroyed() {},
    methods: {
        /**
         * 支付订单
         */
        payOrder() {
            this.$models.order
                .pay({
                    request: {
                        api: "order.pay." + this.order.listType,
                        data: {
                            id: this.order.id,
                        },
                    },
                })
                .then(() => {
                    this.$emit("refresh");
                });
        },
        /**
         * 支付尾款
         */
        payRetainage() {
            this.$models.order
                .pay({
                    request: {
                        api: "order.retainage." + this.order.listType,
                        data: {
                            id: this.order.id,
                        },
                    },
                })
                .then(() => {
                    this.$emit("refresh");
                });
        },
        /**
         * 确认完成
         */
        finishOrder() {
            this.$models.order
                .finishOrder({
                    request: {
                        api: "order.finish." + this.order.listType,
                        data: {
                            id: this.order.id,
                        },
                    },
                })
                .then((response) => {
                    this.$utils.toast(response.msg).then(() => {
                        this.$emit("refresh");
                    });
                });
        },
        /**
         * 取消订单
         */
        cancelOrder() {
            this.$models.order
                .cancelOrder({
                    request: {
                        api: "order.cancel." + this.order.listType,
                        data: {
                            id: this.order.id,
                        },
                    },
                })
                .then((response) => {
                    this.$utils.toast(response.msg).then(() => {
                        this.$emit("refresh");
                    });
                });
        },
        /**
         * 删除订单
         */
        deleteOrder() {
            console.log(this.order.id);
            let pages = getCurrentPages();
            if (pages[pages.length - 1].route == "pages/order/detail") {
                this.$store.commit("system/refreshOrder", true);
                this.$utils.toPage("", "", "back");
            } else {
                this.$emit("refresh");
            }
        },
        /**
         * 评价
         */
        appraiseOrder() {
            let params = "?list=" + this.order.listType + "&id=" + this.order.id + "&orderId=" + this.order.orderId;
            this.$utils.toPage("/pages/order/appraise" + params);
        },
        /**
         * 退款
         */
        refundOrder() {
            let order = encodeURIComponent(
                JSON.stringify({
                    id: this.order.id,
                    orderId: this.order.orderId,
                    price: this.order.price,
                })
            );
            this.$utils.toPage("/pages/order/refund?list=" + this.order.listType + "&order=" + order);
        },
        /**
         * 查看未通过原因
         */
        showReason() {
            uni.showModal({
                title: "驳回原因",
                content: this.order.rejectDesc,
                showCancel: false,
            });
        },
    },
};
</script>

<style lang="less" scoped>
.component-order-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    .btn,
    .del {
        margin-left: 30rpx;
    }
    .btn {
        display: inline-block;
        background: rgba(139, 155, 235, 0);
        border: 1px solid #999999;
        border-radius: 28rpx;
        padding: 15rpx 26rpx;
        font-size: 26rpx;
        // color: #999999;
        color: #666666;
        line-height: 26rpx;
    }
    .btn.pay {
        color: #ffffff;
        background-color: #ec7655;
        border: 1px solid #ec7655;
    }
    .btn.normal {
        border: 0;
    }
    .btn.active {
        color: #666666;
    }
    .del {
        color: #b5b5b5;
        font-size: 40rpx;
    }
}
</style>